<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>html canvas</title>
	<link rel="stylesheet" href="./css/test.css">
</head>
<body>

<!--	<canvas id="myCanvas" height="300" width="500" style="border:1px solid red">-->

<!--	</canvas>-->

</body>
</html>

<script type="text/javascript">
	// height:35px;
	// width: 120px;
	// text-align: center;
	// line-height: 35px;
	// /*border:1px solid;*/
	// background-color: #41414152;
	// border-radius: 2px;
	// position: absolute;
	// top:300px;
	// color: #fff;
	// display: none;
	function tipMsg(){
		var htmlDiv = document.createElement('div');
		htmlDiv.innerHTML = '<span>提示</span>';
		htmlDiv.className = "tip";
		htmlDiv.style.cssText = "height:35px;\n" +
				"\twidth: 120px;\n" +
				"\ttext-align: center;\n" +
				"\tline-height: 35px;\n" +
				"\t/*border:1px solid;*/\n" +
				"\tbackground-color: #41414152;\n" +
				"\tborder-radius: 2px;\n" +
				"\tposition: absolute;\n" +
				"\ttop:300px;\n" +
				"\tcolor: #fff;\n";
		clearTimeout(timmer);
		var timmer = setTimeout(function () {
			htmlDiv.style.cssText = "display:none"
		},1000);


		var body = document.body;
		body.insertBefore(htmlDiv,body.lastChild)
	}

	tipMsg();
	// var c = document.getElementById("myCanvas");
	// var ctx = c.getContext('2d');
	//
	// ctx.beginPath();
	// ctx.fillStyle = "#999";

	// var img = new Image();
	//     img.src = "./img/flower.gif";
	//     img.onload = function () {
	//         ctx.beginPath();
	//         ctx.arc(60,50,30,0,Math.PI*2)
	//         ctx.fill();
	//         ctx.clip()
	//         ctx.drawImage(img,0,0)
	//     }

	// ctx.fillRect(100,100,100,50);
	// ctx.globalCompositeOperation = 'destination-out';
	// ctx.lineWidth = 10;
	// ctx.lineCap = 'round';//画笔的样式  圆形
	// c.onmousedown = function (e) {
	// 	        var ev = e || window.event;
	// 	        var x = ev.clientX - c.offsetLeft;
	// 	        var y = ev.clientY - c.offsetTop;
	// 	        ctx.moveTo(x,y);
	// 	        ctx.lineTo(x+10,y-10);
	// 	        ctx.lineTo(x-10,y-10);
	// 	        ctx.lineTo(x,y+50);
	// 	        ctx.fill();
	// 	        // ctx.strokeRect(x,y,10,10);
	// 	        // ctx.moveTo(x,y);
	//
	//
	// 	        c.onmousemove = function (e) {
	// 	            // var ev = e || window.event;
	// 	            // var x = ev.clientX - c.offsetLeft;
	// 	            // var y = ev.clientY - c.offsetTop;
	// 	            // ctx.lineTo(x,y);
	// 	            // ctx.stroke()
	// 	        };
	//
	// 	        c.onmouseup = function () {
	// 	            c.onmousemove = ""
	// 	        }
	// 	    };
	// // ctx.arc(100,100,40,0,Math.PI*2,false);
	// ctx.moveTo(86,80)
	// ctx.arc(80,80,8,0,Math.PI*2,false)
	// ctx.moveTo(126,80)
	// ctx.arc(120,80,8,0,Math.PI*2,false)
	// ctx.moveTo(100,120)
	// ctx.lineTo(90,110)
	// ctx.lineTo(110,110)
	// ctx.lineTo(100,120)
	// // ctx.moveTo(10,10);
	// // ctx.lineTo(10,100);
	// // ctx.lineTo(200,100);
	// // ctx.closePath();
	// ctx.stroke();
	// ctx.fill();
	// var c = document.getElementById("myCanvas")
	// var txt = c.getContext("2d")
	// txt.fillStyle = "red";
	// txt.beginPath();
	// txt.arc(50,100,10,0,Math.PI*2,false);
	// txt.fill()
	// function fun(p){
	//   	a=5;
	// 	b=12;
	// 	p>1?(p<b?p>b:p=6):p=3
	//
	// 	console.log(p)//9
	// }
	// fun(9)
</script>
